import { onMounted, onUnmounted } from "vue"

export default (handlers: {
  onDragover: (ev: DragEvent) => void
  onDragend: (ev: DragEvent) => void
}) => {
  onMounted(() => {
    addEvent()
  })

  onUnmounted(() => {
    clearEvent()
  })

  function addEvent() {
    document.addEventListener('dragover', (ev) => {
      handlers.onDragover(ev)
    })

    document.addEventListener('dragend', (ev) => {
      handlers.onDragend(ev)
    })
  }

  function clearEvent() {
    document.removeEventListener('dragover', (ev) => {
      handlers.onDragover(ev)
    })

    document.addEventListener('dragend', (ev) => {
      handlers.onDragend(ev)
    })
  }
}